<template>
	<view class="chat-container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="back-btn" @click="goBack">
				<text class="iconfont icon-back"></text>
			</view>
			<view class="title">{{ organizer.name }}</view>
			<view class="right-btn"></view>
		</view>
		
		<view class="chat-content">
			<!-- 主办方信息卡片 -->
			<view class="organizer-card">
				<image class="avatar" :src="organizer.avatar" mode="aspectFill"></image>
				<view class="info">
					<view class="name">{{ organizer.name }}</view>
					<view class="desc">{{ organizer.description }}</view>
				</view>
			</view>
			
			<!-- 消息列表 -->
			<scroll-view 
				class="message-list" 
				scroll-y="true" 
				:scroll-top="scrollTop"
				:scroll-with-animation="true"
				@scrolltoupper="loadMoreMessages"
				:style="{ height: `${scrollViewHeight}px` }"
			>
				<view class="message-wrapper">
					<view class="message-item" v-for="(msg, index) in messages" :key="index">
						<!-- 时间戳 -->
						<view class="time-stamp" v-if="showTimestamp(index)">
							{{ formatTime(msg.time) }}
						</view>
						
						<!-- 消息气泡 -->
						<view class="message-content" :class="{ 'self': msg.isSelf }">
							<image 
								class="avatar" 
								:src="msg.isSelf ? userInfo.avatar : organizer.avatar" 
								mode="aspectFill"
							></image>
							<view class="bubble" :class="{ 'self': msg.isSelf }">
								{{ msg.content }}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 底部输入框 -->
		<view class="input-section">
			<view class="input-box">
				<textarea 
					class="input" 
					v-model="inputContent" 
					:adjust-position="false"
					:show-confirm-bar="false"
					:cursor-spacing="20"
					:maxlength="500"
					placeholder="请输入消息..."
					@focus="onInputFocus"
					@blur="onInputBlur"
				></textarea>
				<view class="send-btn" :class="{ 'active': inputContent.trim() }" @click="sendMessage">
					发送
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				organizer: {
					name: '杭州约会派对',
					avatar: '/static/organizer-avatar.png',
					description: '专业活动策划 | 已认证主办方'
				},
				userInfo: {
					avatar: '/static/avatar.png'
				},
				messages: [
					{
						content: '您好,请问有什么可以帮您的吗?',
						time: Date.now() - 3600000,
						isSelf: false
					},
					{
						content: '我想咨询一下周末下午茶约会活动的具体事项',
						time: Date.now() - 3500000,
						isSelf: true
					},
					{
						content: '好的,这个活动目前还有12个名额,活动包含精美下午茶、红酒品鉴、互动交友环节,请问您想了解哪个部分呢?',
						time: Date.now() - 3400000,
						isSelf: false
					}
				],
				inputContent: '',
				scrollTop: 0,
				isInputting: false,
				scrollViewHeight: 0,
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			showTimestamp(index) {
				if (index === 0) return true
				const currentMsg = this.messages[index]
				const prevMsg = this.messages[index - 1]
				return currentMsg.time - prevMsg.time > 300000 // 5分钟显示一次时间戳
			},
			formatTime(timestamp) {
				const date = new Date(timestamp)
				const today = new Date()
				const isToday = date.toDateString() === today.toDateString()
				
				if (isToday) {
					return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
				}
				return date.toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
			},
			sendMessage() {
				if (!this.inputContent.trim()) return
				
				const newMessage = {
					content: this.inputContent,
					time: Date.now(),
					isSelf: true
				}
				
				this.messages.push(newMessage)
				this.inputContent = ''
				this.scrollToBottom()
				
				// 模拟回复
				setTimeout(() => {
					const reply = {
						content: '好的,我明白了。请问您还有其他问题吗?',
						time: Date.now(),
						isSelf: false
					}
					this.messages.push(reply)
					this.scrollToBottom()
				}, 1000)
			},
			scrollToBottom() {
				setTimeout(() => {
					const query = uni.createSelectorQuery().in(this)
					query.select('.message-list').boundingClientRect()
					query.exec(res => {
						if (res[0]) {
							this.scrollTop = res[0].height * 2
						}
					})
				}, 100)
			},
			loadMoreMessages() {
				// TODO: 加载更多历史消息
			},
			onInputFocus() {
				this.isInputting = true
				this.scrollToBottom()
			},
			onInputBlur() {
				this.isInputting = false
			},
			calculateScrollViewHeight() {
				const systemInfo = uni.getSystemInfoSync()
				const windowHeight = systemInfo.windowHeight
				
				// 获取导航栏高度
				const navBarHeight = 44
				// 获取主办方卡片高度
				const organizerCardHeight = 80
				// 获取输入框高度
				const inputSectionHeight = 60
				
				// 计算scroll-view的高度
				this.scrollViewHeight = windowHeight - (navBarHeight + organizerCardHeight + inputSectionHeight)
			},
		},
		onReady() {
			this.calculateScrollViewHeight()
			this.scrollToBottom()
		}
	}
</script>

<style lang="scss">
.chat-container {
	height: 100vh;
	display: flex;
	flex-direction: column;
	background: #f8f9fa;
	
	.nav-bar {
		flex-shrink: 0;
		height: 88rpx;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		z-index: 100;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
		
		.back-btn {
			width: 80rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			
			.iconfont {
				font-size: 40rpx;
				color: #333;
			}
		}
		
		.title {
			font-size: 32rpx;
			font-weight: 500;
			color: #333;
		}
		
		.right-btn {
			width: 80rpx;
		}
	}
	
	.chat-content {
		flex: 1;
		overflow: hidden;
		position: relative;
		
		.organizer-card {
			padding: 20rpx 30rpx;
			background: #fff;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #f0f0f0;
			
			.avatar {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			
			.info {
				flex: 1;
				
				.name {
					font-size: 32rpx;
					font-weight: 500;
					color: #333;
					margin-bottom: 8rpx;
				}
				
				.desc {
					font-size: 24rpx;
					color: #999;
				}
			}
		}
		
		.message-list {
			flex: 1;
			overflow-y: scroll;
			padding: 0 30rpx;
			
			.message-wrapper {
				padding: 20rpx 0;
			}
			
			.time-stamp {
				text-align: center;
				margin: 20rpx 0;
				
				text {
					font-size: 24rpx;
					color: #999;
					background: rgba(0,0,0,0.1);
					padding: 4rpx 12rpx;
					border-radius: 8rpx;
				}
			}
			
			.message-content {
				display: flex;
				align-items: flex-start;
				margin-bottom: 30rpx;
				
				&.self {
					flex-direction: row-reverse;
					
					.bubble {
						margin: 0 20rpx 0 0;
						background: #ff69b4;
						color: #fff;
						
						&::before {
							right: -16rpx;
							left: auto;
							border-left-color: #ff69b4;
							border-right-color: transparent;
						}
					}
				}
				
				.avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					flex-shrink: 0;
				}
				
				.bubble {
					max-width: 60%;
					padding: 20rpx;
					background: #fff;
					border-radius: 12rpx;
					font-size: 28rpx;
					color: #333;
					margin-left: 20rpx;
					position: relative;
					word-break: break-all;
					
					&::before {
						content: '';
						position: absolute;
						top: 20rpx;
						left: -16rpx;
						border: 8rpx solid transparent;
						border-right-color: #fff;
					}
				}
			}
		}
	}
	
	.input-section {
		flex-shrink: 0;
		padding: 20rpx 30rpx;
		background: #fff;
		border-top: 1rpx solid #f0f0f0;
		
		.input-box {
			display: flex;
			align-items: flex-end;
			
			.input {
				flex: 1;
				min-height: 80rpx;
				max-height: 160rpx;
				background: #f5f5f5;
				border-radius: 40rpx;
				padding: 20rpx 30rpx;
				font-size: 28rpx;
				line-height: 40rpx;
			}
			
			.send-btn {
				width: 120rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				color: #999;
				margin-left: 20rpx;
				
				&.active {
					color: #ff69b4;
					font-weight: 500;
				}
			}
		}
	}
}
</style>
